<template>
  <a-layout>
    <a-layout-header class="bg-white admin-content-header">
      <div class="col-4 admin-tiao-left">
        <h3 class>
          <img src="https://cdn.hterobot.com/vue/teacher/image/%E7%9B%AE%E5%BD%95.png" alt srcset />
        </h3>
      </div>
      <div class="col-8 text-right">
        <el-button-group>
          <el-button @click="dialogVisible = true">添加课程</el-button>
        </el-button-group>
      </div>
      <el-dialog title="课程列表" :visible.sync="dialogVisible" width="800px">
        <changemodel
          v-bind="{ allData:getTpdata, selectDate, clickdata, group: teacherproposal , groupdata }"
        ></changemodel>
      </el-dialog>
    </a-layout-header>
    <a-layout>
      <a-layout-sider class="bg-white" width="274px">
        <div class="teacher-scroll">
          <el-tree
            id="tree"
            :data="data"
            node-key="ID"
            :default-expand-all="false"
            :props="defaultProps"
            @node-click="getdata"
            :highlight-current="true"
            :accordion="true"
            :indent="30"
          ></el-tree>
        </div>
      </a-layout-sider>
      <a-layout-content class="teacher-scroll main" :class="!teacherproposalid?'teacher-main':''">
        <h5 class="text-left teacher-h4" v-show="teacherproposalid">{{teacherproposalname}}</h5>
        <div class="text-justify" v-for="(v, i) in pageTableData" :key="`${i}teacherdata3`">
          <a target="_blank" :href="href(v)">
            <el-container>
              <el-aside class="teacher-work" width="64px">
                <svg class="icon" v-show="v.isdown" aria-hidden="true">
                  <use xlink:href="#iconicon-work" />
                </svg>
                <svg class="icon" v-show="!v.isdown" aria-hidden="true">
                  <use v-if="v.types==='视频课程'" xlink:href="#iconicon-video" />
                  <use v-else xlink:href="#iconicon-ppt" />
                </svg>
              </el-aside>
              <el-main class="main teacher-main-0">
                <div class="float-left text-dark">{{v.name}}</div>
                <div class="float-right">
                  <svg class="icon" v-show="v.isdown" aria-hidden="true">
                    <use xlink:href="#iconxiazai" />
                  </svg>
                  <svg class="icon" v-show="!v.isdown" aria-hidden="true">
                    <use xlink:href="#iconchakan" />
                  </svg>
                </div>
              </el-main>
            </el-container>
          </a>
        </div>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script>
import {
  asynccreateusertotpdata,
  asyncselectallusertotpdataid
} from "../../../plugins/api.js";
import { uniq } from "underscore";
import { mapGetters } from "vuex";
import changemodel from "@/components/admin/changemodel";

export default {
  name: "teachercourse",
  components: {
    changemodel
  },
  computed: {
    ...mapGetters(["getTeacherproposal", "getTpdata"]),
    data() {
      const { getTeacherproposal, search, mytpdata } = this;
      const data = getTeacherproposal.map(v => {
        // eslint-disable-next-line no-unused-vars
        const { ID, tpdata, ...d } = v;
        const tp = mytpdata.filter(vo => vo.teacherproposalid == ID);
        return {
          ...d,
          ID,
          tpdata: tp
        };
      });
      if (search) {
        return data.filter(v => v.name.includes(search));
      }
      function a(x, id) {
        let arr = [];
        for (let v in x) {
          if (x[v].pid == id) {
            x[v].children = uniq(a(x, x[v].ID));
            if (
              x[v].children.length ||
              x[v].tpdata.find(v => v.usertotpdata.length)
            ) {
              arr.push(x[v]);
            }
          }
        }
        return arr;
      }
      return a(data);
    },
    teacherproposal() {
      const { getTeacherproposal } = this;
      function a(x, id) {
        let arr = [];
        for (let v in x) {
          if (x[v].pid == id) {
            x[v].children = uniq(a(x, x[v].ID));
            arr.push(x[v]);
          }
        }
        return arr;
      }
      return a(getTeacherproposal);
    },
    mytpdata() {
      const { getTpdata, usertotpdata } = this;
      return getTpdata.map(v => {
        const { ID, ...d } = v;
        const tpd = usertotpdata.filter(vo => vo.tpdata_ID == ID);
        return {
          ...d,
          ID,
          usertotpdata: tpd
        };
      });
    },
    selectDate() {
      const { getTpdata, usertotpdata } = this;
      return getTpdata.filter(v => {
        const { ID } = v;
        return usertotpdata.find(vo => vo.tpdata_ID == ID);
      });
    },
    pageTableData() {
      const { value, tpdata } = this;
      return tpdata.filter(
        v => v.usertotpdata.length && v.name.includes(value)
      );
    },
    groupdata() {
      return this.getTpdata.map(({ ID, teacherproposalid }) => {
        return { ID, groupid: teacherproposalid, childid: ID };
      });
    }
  },
  data() {
    return {
      checkAll: false,
      isIndeterminate: true,
      checkedCities: [],
      selectdata: [],
      usertotpdata: [],
      dialogVisible: false,
      loading: false,
      defaultProps: {
        children: "children",
        label: "name"
      },
      search: "",
      teacherproposalid: 0,
      teacherproposalname: "",
      tpdata: [],
      value: ""
    };
  },
  props: ["userid"],
  async mounted() {
    this.start();
  },
  watch: {
    $route() {
      this.start();
    }
  },
  methods: {
    async start() {
      this.usertotpdata = await asyncselectallusertotpdataid({
        uid: this.userid
      });
    },
    getdata({ ID, children, name, tpdata }) {
      if (children.length) return;
      this.teacherproposalid = ID;
      this.teacherproposalname = name;
      this.tpdata = tpdata;
    },
    href(v) {
      if (v.isdown) {
        return v.fileurl;
      }
      if (v.types !== "视频课程") {
        return `/wordliulan.html?ID=${v.ID}`;
      }
      return `/teachervideo.html?ID=${v.ID}`;
    },
    async clickdata({ ID }) {
      const { userid } = this;
      await asynccreateusertotpdata({
        uid: userid,
        tpdata_ID: ID
      });
      await this.start();
      this.$message("修改成功");
    }
  }
};
</script>
<style>
#tree .el-tree-node.is-current > .el-tree-node__content {
  background-color: rgba(230, 247, 255, 1);
  border-right: 4px solid #3e8ef7;
}
#tree .el-tree-node__content {
  height: 48px;
}
.phoneinput input {
  border-radius: 24px !important;
  height: 48px !important;
}
.phoneinput .el-input__prefix {
  line-height: 48px;
}
</style>

<style scoped>
.teacher-aside {
  padding-top: 30px;
}
.teacher-scroll {
  max-height: 700px;
  overflow-y: scroll;
}
.teacher-scroll::-webkit-scrollbar {
  width: 1px;
  height: 1px;
}
.phoneinput {
  margin-top: 16px;
  margin-bottom: 16px;
  width: 272px;
}
.teacher-header {
  padding-left: 0;
}
.main {
  padding-top: 0;
  padding-bottom: 0;
}

.teacher-main {
  background-image: url(http://cdn.hterobot.com/vue/teacher/image/main_ikon.png);
  background-repeat: no-repeat;
  background-position: center;
}

.teacher-work {
  width: 64px;
  background: rgba(224, 247, 255, 1);
  border-radius: 6px;
  line-height: 64px;
  text-align: center;
}
.teacher-work .icon {
  display: inline-block;
  height: 64px;
  font-size: 24px;
  vertical-align: middle;
  
}

.float-right .icon {
  display: block;
  height: 42px;
  line-height: 42px;
  font-size: 24px;
  background-color: #f5f5f5;
  margin: 10px auto;
  padding: 0px 10px;
  border-radius: 50%;
  width: 42px;
}

.teacher-h4::before {
  content: "●";
  color: #3e8ef7;
  padding-right: 15px;
}
.text-justify a {
  display: block;
  line-height: 64px;
  margin-top: 8px;
  margin-bottom: 8px;
}
.teacher-main-0 .float-right {
  width: 74px;
}
.teacher-main-0 {
  transition: all 0.3s ease-in-out;
  background-color: #ffffff;
}
.teacher-main-0:hover {
  background-color: #e6f7ff;
}
</style>